import { Eye } from './Icon/Eye';
import { Dot } from './Icon/Dot';
import { TriangleDown } from './Icon/TriangleDown';
import { BoneIcon } from './Icon/BoneIcon';
import { useStore } from '../store';
import { observer } from 'mobx-react-lite';
import { TriangleRight } from './Icon/TriangleRight';
import { emitter } from '../eventEmitter';
import { useDrop } from 'react-dnd';
import { ItemTypes } from './Library/ItemTypes';

import DisplayImage from "./Icon/svg/DisplayImage.svg?react";
import SlotImage from "./Icon/svg/SlotImage.svg?react";
import SelectedDisplay from "./Icon/svg/SelectedDisplay.svg?react";


const BoneItem = observer((props: any) => {
    const { sceneStore, resourceStore } = useStore();

    let bone = sceneStore.boneMap.get(props.boneName)!;
    let ml = 0.5 * bone.level + 8 * 0.25;

    const foldHandler = (e: any) => {
        sceneStore.changeFold(bone.name);
        e.stopPropagation();
        e.preventDefault();
    };

    const mouseEnterHandler = (e: any) => {
        emitter.emit("hoverItemEnter", bone.name);
    };

    const mouseLeaveHandler = (e: any) => {
        emitter.emit("hoverItemLeave", bone.name);
    };

    const clickHandler = (e: any) => {
        emitter.emit("clickBone", bone.name);
    };

    let className = ["flex", "items-center", "hover:bg-slate-700", "min-w-max"];
    if (bone.isSelected) {
        className.push("bg-[#2f4e52]");
    }

    const [{ isOver, canDrop }, drop] = useDrop(
        () => ({
            accept: ItemTypes.ImageItem,
            //canDrop: () => game.canMoveKnight(x, y),
            drop: (item: any) => {
                console.log("item drop", item);
                emitter.emit("createDisplay", {
                    path: resourceStore.resources[item.index].url,
                    boneName: bone.name,
                    slot: resourceStore.resources[item.index].name,
                    name: resourceStore.resources[item.index].name,
                })
            },
            collect: (monitor) => ({
                isOver: !!monitor.isOver(),
                canDrop: !!monitor.canDrop(),
            }),
        }),
        [],
    )

    return (
        <>
            <div
                ref={drop}
                className={className.join(" ")}
                onMouseEnter={mouseEnterHandler}
                onMouseLeave={mouseLeaveHandler}
                onClick={clickHandler}
            >
                <Dot></Dot>
                <Dot></Dot>
                <div className='flex items-center' style={{ marginLeft: `${ml}rem` }}>
                    {
                        (bone.children.length == 0 && bone.slot.length == 0) ? <span className='w-5 h-5'></span> :
                            ((bone.isFold ? <TriangleRight foldHandler={foldHandler}></TriangleRight> : <TriangleDown foldHandler={foldHandler}></TriangleDown>))
                    }
                    <BoneIcon></BoneIcon>
                    <span>{bone.name}</span>
                </div>
            </div>
            {
                bone.slot.map((slotItem: any) => {
                    return (
                        <>
                            <div className='flex items-center'>
                                <Dot></Dot>
                                <Dot></Dot>
                                <div className='flex items-center' style={{ marginLeft: `${ml + 0.5}rem` }}>
                                    <TriangleDown></TriangleDown>
                                    <SlotImage className="w-4 h-4 m-1"></SlotImage>
                                    <span>{slotItem.name}</span>
                                </div>
                            </div>
                            {
                                sceneStore.curSkin?.get(slotItem.name)?.map((display: any) => {
                                    return (
                                        <div className='flex items-center'>
                                            <span className='w-5 h-5'></span>
                                            <span className='w-5 h-5'></span>
                                            <div className='flex items-center' style={{ marginLeft: `${ml + 1}rem` }}>
                                                <SelectedDisplay className="w-3 h-3 m-1 cursor-pointer"></SelectedDisplay>
                                                <DisplayImage className="w-4 h-4 m-1"></DisplayImage>
                                                <span>{display.name}</span>
                                            </div>
                                        </div>
                                    );
                                })
                            }
                        </>
                    );
                })
            }

            {
                (!bone.isFold) && sceneStore.boneMap.get(props.boneName)?.children.map((boneName: string) => {
                    return (
                        <BoneItem key={boneName} boneName={boneName}></BoneItem>
                    );
                })
            }
        </>
    );
});

const Scene = observer((props: any) => {
    return (
        <div className='text-sm space-y-2 flex flex-col h-full'>
            < div className="relative" >
                <label htmlFor="UserEmail" className="sr-only"> Email </label>

                <input
                    type="email"
                    id="UserEmail"
                    placeholder="Search Library"
                    className="w-full rounded-sm border-gray-200 shadow-sm p-0 text-black"
                />

                <span
                    className="pointer-events-none absolute inset-y-0 end-0 grid w-10 place-content-center text-gray-500"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
                        <path
                            fillRule="evenodd"
                            d="M5.404 14.596A6.5 6.5 0 1116.5 10a1.25 1.25 0 01-2.5 0 4 4 0 10-.571 2.06A2.75 2.75 0 0018 10a8 8 0 10-2.343 5.657.75.75 0 00-1.06-1.06 6.5 6.5 0 01-9.193 0zM10 7.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
                            clipRule="evenodd"
                        />
                    </svg>
                </span>
            </div>

            <div className='flex'>
                <Eye></Eye>
                <Eye></Eye>
                <span className='ml-8'>Armature</span>
            </div>

            <div className='w-full grow overflow-auto'>
                <BoneItem boneName="root"></BoneItem>
                {/* <div className='flex items-center'>
                    <Dot></Dot>
                    <Dot></Dot>
                    <div className='flex items-center ml-8'>
                        <TriangleDown></TriangleDown>
                        <BoneIcon></BoneIcon>
                        <span>Bone</span>
                    </div>
                </div>

                <div className='flex items-center'>
                    <Dot></Dot>
                    <Dot></Dot>
                    <div className='flex items-center ml-10'>
                        <TriangleDown></TriangleDown>
                        <BoneIcon></BoneIcon>
                        <span>Bone</span>
                    </div>
                </div>

                <div className='flex items-center'>
                    <span className='w-5 h-5'></span>
                    <span className='w-5 h-5'></span>
                    <div className='flex items-center ml-8'>
                        <TriangleDown></TriangleDown>
                        <BoneIcon></BoneIcon>
                        <span>Bone</span>
                    </div>
                </div>

                <div className='flex items-center'>
                    <span className='w-5 h-5'></span>
                    <span className='w-5 h-5'></span>
                    <div className='flex items-center ml-8'>
                        <TriangleDown></TriangleDown>
                        <DisplayImage className="w-4 h-4 m-1"></DisplayImage>
                        <span>Bone_a</span>
                    </div>
                </div>

                <div className="flex items-center">
                    <span className='w-10 h-5'></span>
                    <div className='flex items-center ml-8'>
                        <input
                            className="h-4 w-4"
                            type="radio"
                            name="flexRadioDefault"
                            id="radioDefault01" />
                        <BoneIcon></BoneIcon>
                        <span>ssdfas</span>
                    </div>
                </div>

                <div className="flex items-center">
                    <span className='w-10 h-5'></span>
                    <div className='flex items-center ml-8'>
                        <input
                            className="h-4 w-4 disabled:opacity-60"
                            type="radio"
                            name="flexRadioDefault"
                            disabled
                            id="radioDefault01" />
                        <BoneIcon></BoneIcon>
                        <span>ssdfas</span>
                    </div>
                </div>


                <div className="flex items-center">
                    <span className='w-10 h-5'></span>
                    <div className='flex items-center ml-8'>
                        <input
                            className="h-4 w-4 disabled:opacity-60"
                            type="radio"
                            name="flexRadioDefault"
                            disabled
                            id="radioDefault01" />
                        <BoneIcon></BoneIcon>
                        <span>ssdfas</span>
                    </div>
                </div> */}

            </div>
        </div>
    );
})

export { Scene };